<template>
	<view class="page">
		<!-- @touchmove.stop.prevent="moveHandle" -->
		<view class="info-wrap">
			<text class="about">请填写相关信息</text>
			<view class="name">
				<input type="text" placeholder="请填写您的称呼" style="ime-mode:disabled"  placeholder-style="color: #ccc"  v-model="name1"/>
			</view>
			<view class="tel">
				<input type="text" placeholder="请填写您的手机号" placeholder-style="color: #ccc" v-model="phone1" />
			</view>
			 <view  class="address">
			        <pick-regions class="address-picker" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">      
						<input type="text" disabled placeholder="点击选择省市区" :value="provincec" placeholder-style="color: #ccc"  />
						<!-- <text :style="{color:address1==''?'#ccc':'black'}" >{{address1!=''?address1:'点击选择省市区'}}</text> -->
			        </pick-regions>
			</view>
			<textarea v-model="content" class="content" placeholder="请填写您的留言" placeholder-style="color: #ccc"></textarea>
			<view class="submit" @click="merchantsSettled">
				<image src="/static/img/login.png"></image>
				<text >提交</text>
			</view>
			<text class="close" @click="close">关闭</text>
			
		</view>
		
		
		
		 
	</view>
</template>

<script>
	 import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		 components:{ pickRegions },
		data() {
			return {
				phone1: '',
				name1: '',
				content:'',
				region:[],
				defaultRegion:['北京市','广州市','番禺区'],
				defaultRegionCode:'110101',
		
				provincec:'',
				province:'',
				city:'',
				area:'',
			}
		},
		computed:{
			
		},
		methods: {
			inputCheck(e){
				var _this = e.detail.value
				setTimeout(()=>{
					_this=_this.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g,''); 
					this.name1=_this
				},100)
			},
			close() {
				// #ifdef APP-PLUS
				this.$parent.closeMerchantsPopup() 
				// #endif
				// #ifndef APP-PLUS
				this.$parent.$parent.closeMerchantsPopup() 
				// #endif
				
			},
			moveHandle() {
			  return;
			},
			// 供应商入驻
			merchantsSettled() {
				//请选择地区
				if (this.province == ''){
					this.remove = true
					uni.showToast({
					      title:'请选择省市区',
					     icon:'none',
					     duration:1000
					     })
						 return false
				}
			
				this.$api.merchantsSettled({
					relation_phone: this.phone1,
					supplier_name: this.name1,
					province: this.province,
					city:this.city,
					area:this.area,
					desc:this.content
				}).then(res => {
					uni.showToast({
					    title: '提交成功',
					    duration: 2000
					});
					
				// #ifdef APP-PLUS
				this.$parent.closeMerchantsPopup() 
				// #endif
				// #ifndef APP-PLUS
				this.$parent.$parent.closeMerchantsPopup() 
				// #endif
				
				})
			},
			 // 获取选择的地区
			handleGetRegion(region){
			this.region = region
			this.provincec=region[0].name+' '+region[1].name+' '+region[2].name
			this.province=region[0].name
			this.city=region[1].name
			this.area=region[2].name
		
				
			}
		}
	}
</script>

<style scoped>
	.page {
		position: fixed;
		z-index: 900;
		background: rgba(0,0,0,0.3);
		top: 0;
		width: 100%;
		height: 100vh;
	}
	.info-wrap {
		width: 650rpx;
		height: 900rpx;
		margin-top: calc((100vh - 900rpx)/2);
		margin-left: 50rpx;
		overflow: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: rgba(255,255,255,1);
		border-radius: 30rpx;
		font-size: 30rpx;
	}
	.about {
		display: block;
		width: 610rpx;
		height: 100rpx;
		margin-top: 10rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
		border-bottom: 1rpx solid #f1f1f1;
	}
	.name {
		width: 570rpx;
		height: 88rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #f1f1f1;
		/* border-top: 1rpx solid #f1f1f1; */
	}
	input {
		padding-left: 20rpx;
		width: 100%;
		height: 100%;
	}
	.tel {
		width: 570rpx;
		height: 88rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.address {
		width: 570rpx;
		height: 88rpx;
		border-bottom: 1rpx solid #f1f1f1;
		overflow: hidden;
		/* padding: 20rpx; */
	}
	.address-picker{
		width: 570rpx;
		height: 88rpx;
		
	}
	.address-picker text{
		color: #ccc;
		line-height: 88rpx;
		margin-left: 20rpx;
	}
	.select-address {
		display: block;
		font-size: 35rpx;
		color: #ccc;
	}
	.content {
		width: 510rpx;
		height: 174rpx;
		margin-top: 50rpx;
		padding: 20rpx;
		background: rgba(250,250,250,1);
		border: 1rpx solid rgba(204,204,204,1);
		border-radius: 10rpx;
	}
	.submit {
		position: relative;
		width: 320rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-top: 50rpx;
	}
	.submit image {
		width: 100%;
		height: 100%;
	}
	.submit text {
		position: absolute;
		top: 0;
		left: 131rpx;
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.close {
		display: block;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(102,102,102,1);
		margin-top: 30rpx;
	}
</style>
